<template>
	<view class="container" @tap="togglePicker(0),bottomHeight='0rpx'">
		<u-navbar :title="tit" :fixed="true" :placeholder="true" :safeAreaInsetTop="true" :autoBack="false"
			leftIconColor="#333" titleStyle="color:#333" bgColor="#E0DDDA" rightText=" · · ·" @rightClick="right"
			@leftClick="leftClick"></u-navbar>
		<!--内容-->
		<view class="scroll" :style="{height: scrollHeight}">
			<scroll-view :scroll-into-view="scrollViewId" scroll-y style="height: 100%;" class="sssc"
				:scroll-with-animation="true" :scroll-top="scrtop" :refresher-enabled="open"
				@refresherrefresh="getmsglist(isRefresh=true)">
				<view class="item-space"></view>
				<view v-for="(item, index) in list" :key="index">
					<!-- <view class="time" v-if="showReminder">{{$u.timeFrom(item.time,'hh:MM:ss')}}</view> -->
					<view class="time" v-if="showReminder">{{item.time | date('mm-dd hh:MM:ss')}}</view>
					<!-- {{item.time | timeFrom('yy:mm:dd hh:MM:ss')}} -->
					<!--撤销-->
					<!-- 				<view v-if="item.msgType == 'cancel'" class="cancel">
						<text v-if="item.source == userId" class="text">你撤回了一条消息</text>
						<text v-else class="text">成员 {{ item.telephone }} 撤回了一条消息</text>
					</view> -->
					<view class="item flex-row" :class="[item.source == userId ? 'right' : 'left']">
						<view style="display: flex;flex-direction: column;font-size: 22rpx;">
							<image mode="aspectFill" :src="item.head_img" class="face"
								:class="[item.source == userId ? 'nomar' : 'yesmar']"></image>
						</view>
						<!--文本-->
						<view class="wraps" :class="[item.source == userId ? 'yesss' : 'nosss']">
							<view class="nickname" v-if="item.source!=userId">
								{{item.nickname}}
							</view>
							<view v-if="item.msgType == 'txt'" @click="copymes(item)" class="content flex-row">
								{{item.content}}
								
							</view>
						
							<image v-if="item.msgType == 'img'" @tap.stop="preview(item.url)" :src="item.url" mode="widthFix"
								style="width: 320upx;">
							</image>
							<view style="position: relative;" @click="govideo(item.url)">
								<image :src="item.thumb" alt="" v-if="item.msgType == 'video'" style="width: 320upx;"
									mode="widthFix">
									<image v-if="item.msgType == 'video'"
										style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 90rpx;height: 90rpx;"
										src="/static/image/play.png" mode=""></image>
							</view>
							<!-- <iframe    v-if="item.msgType == 'video'"   style="width: 320upx;position: relative;" :src="item.url" frameborder="0"></iframe> -->
							<!-- <nvideo style="width: 300rpx;height: 500rpx;" v-if="item.msgType == 'video'" :src="item.url"></nvideo> -->
							<!-- <video   v-if="item.msgType == 'video'"   :src="item.url" mode="widthFix" style="width: 320upx;position: relative;"></video> -->
							<view v-if="item.msgType == 'audio'" @tap.stop="playVoice(item)" class="content">
								<image v-show="voicePlayingId != item.url" src="/static/img/audio.png"
									class="voice-icon">
								</image>
								<image v-show="voicePlayingId == item.url" src="/static/img/audio-play.gif"
									class="voice-icon"></image>
							</view>

							<!--图片-->

							<!--地图-->
							<!-- 						<view v-if="item.msgType == 'map'" class="content map" @tap="openLocation(item.content)">
							<view class="title">{{ item.content.address }}</view>
							<map class="box" :latitude="item.content.latitude" :longitude="item.content.longitude"
								:markers="[{latitude: item.content.latitude, longitude: item.content.longitude, iconPath: '../../../static/img/marker.png'}]"
								@tap="openLocation(item.content)"></map>
						</view> -->
							<!--语音-->

						</view>
					</view>
				</view>
				<view id="bottom"></view>
			</scroll-view>
		</view>
		<!--输入-->
		<view class="oper flex-row" :style="{bottom: bottomHeight}" @tap.prevent.stop="">
			<!-- 语音按钮切换 -->
			<!-- #ifdef APP -->
			<image v-if="isEdit" @tap="toggleEdit(false)" style="margin-right: 20rpx;"
				src="/static/img/voice-circle.png" class="icon" mode="aspectFill"></image>
			<image v-else @tap="toggleEdit(true)" style="margin-right: 20rpx;" src="/static/img/keyboard.png"
				mode="aspectFill" class="icon"></image>
			<!-- #endif -->
			<!--输入录音切换-->
			<input @focus="inputFocus" v-if="mute && isEdit" disabled :focus="isFocus" :cursor-spacing="8"
				:adjust-position="false" type="text" v-model="content" class="input" placeholder="全体禁言" />
			<input @focus="inputFocus" @blur="initheight" v-if="!mute && isEdit" :focus="isFocus" :cursor-spacing="8"
				type="text" v-model="content" :disabled="grmute" :adjust-position="isapp" class="input"
				:placeholder="tip" @confirm="send" />

			<!-- 	<input v-if="isEdit" @focus="inputFocus" :focus="isFocus" :cursor-spacing="8" :adjust-position="false"
				type="text" v-model="content" class="input" placeholder="请输入内容" /> -->
			<view v-if="!isEdit" @touchstart="startVoice" @touchend="endVoice" class="input"
				style="text-align: center;">按住发言
			</view>
			<!-- 表情 -->
			<image v-if="isemo" @tap="togglePicker(200, 'emoji')" src="/static/img/emoji.png" class="icon" mode="aspectFill" >
			</image>
			<!-- 发送 -->
			<view @touchend.prevent="send" v-show="content" class="btn">发送</view>
			<!--附件-->
			<image @tap="togglePicker(86, 'file')" v-show="!content" src="/static/img/add.png" class="icon" mode="aspectFill" ></image>
		</view>
		<!--表情-->
		<view v-if="showEmoji" class="emoji" @tap.prevent.stop="">
			<view class="titemo">
				<image src="/static/img/emoji.png" mode="aspectFill" @click="showEmo1=true,showEmo2=false"></image>
				<image src="/static/emjoy/top2.png" mode="aspectFill" @click="showEmo2=true,showEmo1=false"></image>
			</view>
			<view class="list" v-show="showEmo1">
				<view class="item" @tap="content += item" v-for="(item, index) in emojis" :key="index">{{ item }}</view>
			</view>
			<view class="list2" v-show="showEmo2">
				<view class="itemii" v-for="(item,index) in titlist  " :key="index" @click="sendemo(item.image)">
					<image :src="item.image" mode=""></image>
					<text>{{item.text}}</text>
				</view>

			</view>
		</view>
		<!--附件-->
		<view v-if="showFile" class="file" @tap.prevent.stop="">
			<view class="list flex-row">
				<view class="item flex-column" @tap="sendImage()">
					<image src="/static/img/album.png" mode="widthFix" class="icon"></image>
					<view class="text">图片</view>
				</view>
				<view class="item flex-column" @tap="sendPrivateVideo()">
					<image src="/static/img/photo.png" mode="widthFix" class="icon"></image>
					<view class="text">视频</view>
				</view>
				<!-- <view class="item flex-column" @tap="getLocation">
					<image src="/static/img/location.png" mode="widthFix" class="icon"></image>
					<view class="text">位置</view>
				</view> -->
			</view>
		</view>
		<!--语音-->
		<my-voice v-show="showVoice"></my-voice>
	</view>
</template>

<script>
	import emoji from '../../utils/emoji.js'
	import myVoice from '@/components/self-voice/index.vue'
	import {
		getuserinfo
	} from "../../api/index.js";
	import {
		groupDetails
	} from "../../api/hx.js"
	const innerAudioContext = uni.createInnerAudioContext()
	const recorderManager = uni.getRecorderManager()
	import WebIM from "../../utils/WebIM.js"

	export default {
		components: {
			myVoice
		},
		data() {
			return {
				emojis: [],
				isEdit: true,
				isFocus: false,
				showEmoji: false,
				showFile: false,
				showVoice: false,
				scrollHeight: 'auto', // 内容区域高度
				statusBarHeight: 0, // 状态栏高度
				scrollViewId: '', // 滚动到最底部
				voicePlayingId: '', // 正在播放的消息ID
				content: '',
				list: [],
				socketOpen: false,
				socketMsgQueue: [],
				groupId: '',
				userId: "",
				toUserName: '',
				client: '',
				user: null,
				tit: "",
				groupname: "",
				groupid: "",
				groupinfo: {},
				mute: 0,
				tip: "请输入内容",
				is_admin: "",
				showReminder: true,
				bottomHeight: "0rpx",
				scrtop: "",
				onVideoSrc: "",
				isapp: false,
				titlist: [{
						image: "/static/emjoy/hb.png",
						text: "发财"
					},
					{
						image: "/static/emjoy/jingkong.png",
						text: "惊恐"
					},
					{
						image: "/static/emjoy/ganga.png",
						text: "尴尬"
					},
					{
						image: "/static/emjoy/ku.png",
						text: "qwq"
					},
					{
						image: "/static/emjoy/kun.png",
						text: "困了"
					},
					{
						image: "/static/emjoy/nule.png",
						text: "怒了"
					},
					{
						image: "/static/emjoy/sk.png",
						text: "在思考"
					},
					{
						image: "/static/emjoy/tanqi.png",
						text: "叹气"
					},
					{
						image: "/static/emjoy/wuyu2.png",
						text: "无语"
					}, {
						image: "/static/emjoy/bang.png",
						text: "点赞"
					},
					{
						image: "/static/emjoy/hello.png",
						text: "你好"
					},
					{
						image: "/static/emjoy/shengmenqi.png",
						text: "生闷气"
					},
					{
						image: "/static/emjoy/wenhao.png",
						text: "问号"
					},
					{
						image: "/static/emjoy/wuyu.png",
						text: "黑线"
					},
					{
						image: "/static/emjoy/xiaosi.png",
						text: "笑cry"
					},
					{
						image: "/static/emjoy/ye.png",
						text: "耶"
					},
					{
						image: "/static/emjoy/yun.png",
						text: "晕"
					},
					{
						image: "/static/emjoy/haipa.png",
						text: "震惊"
					}


				],
				showEmo1: true,
				showEmo2: false,
				isemo: true,
				grmute: false,
				cursor: '',
				open: true
			}
		},
		onLoad(option) {
			this.groupid = option.id
			this.geterror()
			this.groupdetail()
			// 初始化内容高度
			this.initScrollBar()
			this.onTextMessage()
			setTimeout(() => {
				this.getmsglist()

			}, 500)
			this.removegroup()
			// 初始化状态栏高度
			// uni.getSystemInfo({
			// 	success: res=>{
			// 		this.statusBarHeight = res.statusBarHeight
			// 	}
			// })

			// 结束录音
			recorderManager.onStop(res => {
				this.upload(res.tempFilePath)
			})

			// // 结束播放
			innerAudioContext.onEnded(res => {
				this.voicePlayingId = ''
			})

			// 导入表情
			this.emojis = emoji

			// 监听消息
			// this.$xbcim.onmessage(data=>{
			// 	// 只接收群消息
			// 	if(data.type != 'group') return

			// 	// 处理数据
			// 	data.id = data.extra.id
			// 	data.userFace = data.extra.userFace
			// 	this.list.push(data)
			// 	this.initScrollBar()
			// })
		},
		onHide() {
			innerAudioContext.stop()
		},
		onShow() {
			this.getuser()
			// uni.setNavigationBarTitle({ title: uni.getStorageSync('groupName') })
			// uni.setNavigationBarTitle({
			// 	title: "ssss"
			// })

			// this.getList()
			setTimeout(() => {
				this.ydmsg()
			}, 1000)
			this.groupdetail()

			// #ifdef APP
			this.isapp = true
			// #endif

		},
		onBackPress() {
			if (this.showFile || this.showEmoji) {
				this.showFile = false
				this.showEmoji = false
				this.setScrollHeight(0)
				return true
			}
			return false
		},
		// onNavigationBarButtonTap() {
		// 	this.toPage('/pages/message/group/set?groupId=' + this.groupId)
		// },
		methods: {
			copymes(item){
				
				console.log(item)
			},
			govideo(url) {
				uni.setStorageSync("videourl", url)
				uni.navigateTo({
					url: "/pagesMy/chat/playvideo"
				})
			},
			removegroup() {
				let options = {
					// 会话 ID：单聊为对方的用户 ID，群聊为群组 ID。
					channel: "253185950285828",
					// 会话类型：（默认） `singleChat`：单聊；`groupChat`：群聊。
					chatType: "groupChat",
					// 删除会话时是否同时删除服务端漫游消息。
					deleteRoam: true,
				};
				uni.WebIM.conn
					.deleteConversation(options)
					.then((res) => {
						console.log(res);
					})
					.catch((e) => {
						// 删除失败。
					});
			},
			ydmsg() {
				let option = {
					chatType: "groupChat", // 会话类型，设置为群聊。
					type: "channel", // 消息类型。channel 表示会话已读回执。
					to: this.groupid, // 接收消息对象的用户 ID。
				};
				console.log("已读回执", option)
				let msg = uni.WebIM.message.create(option);
				uni.WebIM.conn.send(msg);
			},
			onIsVideo(src) {
				// 获取视频地址
				this.onVideoSrc = src
				// 获取 video 上下文 videoContext 对象
				this.videoContext = uni.createVideoContext('video_play');
				// 进入全屏状态
				this.videoContext.requestFullScreen();
			},
			geterror() {
				let that = this
				uni.WebIM.conn.addEventHandler("onError", {
					onError: function(ress) {
						console.log(ress, "失败")
						if (ress.type == 28 || ress.type == 32 || ress.type == 39 || ress.type == 1 || ress
							.type == 700) {
							that.getuser()
						}
						if (ress.type == 16) {
							that.getuser()
							uni.$u.tosat("网络异常")
						}

						// that.getgrouplist()
						// console.log("qwdqwd", ress)
					}

				})
			},
			getmsglist(isRefresh = false) {
				console.log('调用 getmsglist', isRefresh);

				let cursorValue = isRefresh ? this.cursor : -1;
				console.log('当前 cursor:', cursorValue);

				let options = {
					targetId: this.groupid,
					pageSize: 50,
					cursor: cursorValue,
					chatType: "groupChat",
					searchDirection: "up",
				};

				uni.WebIM.conn.getHistoryMessages(options).then(res => {
					console.log("消息漫游拉取成功", res);

					this.cursor = res.cursor;
					let alist = res.messages.map(item => {
						return {
							id: item.id,
							content: item.msg,
							msgType: item.type,
							source: item.from,
							target: item.to,
							nickname: item.ext.nickname,
							head_img: item.ext.head_img,
							time: item.time,
							url: item.url,
							thumb: item.thumb,
						};
					});

					if (isRefresh) {
						this.list = alist.reverse().concat(this.list);
						console.log('消息长度:', alist.length);
						this.open = alist.length >= 50;
						if (alist.length >= 50) {
							this.open = true
							uni.$u.toast("加载成功")
						} else {
							this.open = false
							uni.$u.toast("没有更多了")
						}
					} else {
						this.list = alist.reverse();
					}

					console.log('消息列表:', this.list);
					console.log('是否开启:', this.open);
					if (!isRefresh) {
						setTimeout(() => {
							this.setScrollHeight(0);
							this.initScrollBar();
						}, 50);
					}
					// 确保 DOM 更新完成后再设置滚动条

				}).catch(e => {
					console.error("获取消息失败", e);
				});
			},
			// getmsglist() {
			// 	console.log(222)
			// 	let options = {
			// 		// 对方的用户 ID 或者群组 ID 或聊天室 ID。
			// 		targetId: this.groupid,
			// 		// 每页期望获取的消息条数。取值范围为 [1,50]，默认值为 20。
			// 		pageSize: 50,
			// 		// 查询的起始消息 ID。若该参数设置为 `-1`、`null` 或空字符串，从最新消息开始。
			// 		cursor:-1,
			// 		// 会话类型：（默认） `singleChat`：单聊；`groupChat`：群聊；`chatRoom`：聊天室
			// 		chatType: "groupChat",
			// 		// 消息搜索方向：（默认）`up`：按服务器收到消息的时间的逆序获取；`down`：按服务器收到消息的时间的正序获取。
			// 		searchDirection: "up",
			// 	};
			// 	uni.WebIM.conn.getHistoryMessages(options).then(res => {
			// 			console.log("名c>>>>>>>>消息漫游拉取成功", "color:#6ad1c7", res)
			// 			this.cursor=res.cursor
			// 			let alist = res.messages.map(item => {
			// 				return {
			// 					id:item.id,
			// 					content: item.msg, // 修改键名为 newKey
			// 					msgType: item.type, // 其他键名保持不变
			// 					source: item.from,
			// 					target: item.to,
			// 					nickname: item.ext.nickname,
			// 					head_img: item.ext.head_img,
			// 					time: item.time,
			// 					url: item.url,
			// 					thumb: item.thumb,
			// 				};
			// 			});
			// 			this.list = alist.reverse()
			// 			console.log(this.list, "9090")
			// 			setTimeout(() => {
			// 				this.setScrollHeight(0)
			// 				this.initScrollBar()
			// 			}, 50)
			// 			console.log("列表", this.list)
			// 			console.log("历史消息", res);

			// 		})
			// 		.catch((e) => {
			// 			// 获取失败。
			// 		});
			// },
			groupdetail() {
				groupDetails({
					hx_group_id: this.groupid
				}).then(res => {
					if (res.code == 1) {
						this.groupinfo = res.data
						this.is_admin = res.data.group_member_one.is_admin

						if (res.data.mute == 1 && this.is_admin == 0) {
							this.mute = true

						}
						if (res.data.mute == 0) {
							this.mute = false

						}
						if (res.data.group_member_one.is_forbidden_speech == 1) {
							this.grmute = true
							this.tip = "您已被禁言"
						}
						if (res.data.group_member_one.is_forbidden_speech == 0) {
							this.grmute = false
							this.tip = "请输入内容"
						}

						console.log("是否禁言", this.mute)
						this.tit = `${this.groupinfo.name}(${this.groupinfo.member_number}人)`
						// console.log("群详情", res)
					} else {
						uni.$u.toast(res.msg)
					}

				})
			},
			onTextMessage(res) {
				let that = this
				uni.WebIM.conn.addEventHandler("onTextMessage", {
					onTextMessage: function(ress) {
						let aaa = ress
						if (aaa.to == that.groupid) {
							that.list.push({
								content: aaa.msg,
								msgType: aaa.type,
								source: aaa.from,
								target: aaa.to,
								time: aaa.time,
								nickname: aaa.ext.nickname,
								head_img: aaa.ext.head_img
							})

							that.initScrollBar()
						}
						// console.log("666", aaa)

						// console.log("qwdqwd", ress)
					}

				})
				uni.WebIM.conn.addEventHandler("onImageMessage", {
					onImageMessage: function(ress) {
						let aaa = ress
						if (aaa.to == that.groupid) {
							that.list.push({
								url: aaa.url,
								msgType: aaa.type,
								source: aaa.from,
								target: aaa.to,
								time: aaa.time,
								nickname: aaa.ext.nickname,
								head_img: aaa.ext.head_img
							})
							that.initScrollBar()
						}
						// console.log("666", aaa)

						// console.log("qwdqwd", ress)
					}
				})
				uni.WebIM.conn.addEventHandler("onVideoMessage", {
					onVideoMessage: function(ress) {
						let aaa = ress
						if (aaa.to == that.groupid) {
							that.list.push({
								url: aaa.url,
								msgType: aaa.type,
								source: aaa.from,
								target: aaa.to,
								time: aaa.time,
								thumb: aaa.thumb,
								nickname: aaa.ext.nickname,
								head_img: aaa.ext.head_img
							})
							that.initScrollBar()
						}
						// console.log("666", aaa)

						// console.log("qwdqwd", ress)
					}
				})
				uni.WebIM.conn.addEventHandler("onAudioMessage ", {
					onAudioMessage: function(ress) {
						let aaa = ress
						if (aaa.to == that.groupid) {
							that.list.push({
								url: aaa.url,
								msgType: aaa.type,
								source: aaa.from,
								target: aaa.to,
								time: aaa.time,
								// thumb: aaa.thumb,
								nickname: aaa.ext.nickname,
								head_img: aaa.ext.head_img
							})
							that.initScrollBar()
						}
						// console.log("666", aaa)

						// console.log("qwdqwd", ress)
					}
				})
				uni.WebIM.conn.addEventHandler("onGroupChange", {
					onGroupChange: function(ress) {
						if (ress.type == "muteGroup" && that.is_admin == 0 && ress.gid == that.groupid) {
							that.mute = true
							uni.$u.toast("开启群禁言")
						}
						if (ress.type == "rmGroupMute" && ress.gid == that.groupid) {
							that.mute = false

							uni.$u.toast("关闭群禁言")
						}
						if (ress.type == "addMute" && ress.gid == that.groupid) {
							that.grmute = true
							that.tip = "您已被禁言"
							uni.$u.toast("你已被禁言")
						}
						if (ress.type == "removeMute" && ress.gid == that.groupid) {
							that.grmute = false
							that.tip = "请输入内容"
							uni.$u.toast("禁言被取消")
						}

						console.log("禁言", ress)
					}
				})

			},
			// 发送消息
			send() {
				// this.pushMessage(this.content, 'text', ()=>{
				// 	this.content = ''
				// })
				if (this.mute == true) {
					uni.$u.toast("全体禁言中")
				} else {
					let option = {
						// 消息类型。
						type: "txt",
						// 消息内容。
						msg: this.content,
						// 消息接收方：单聊为对方用户 ID，群聊和聊天室分别为群组 ID 和聊天室 ID。
						to: this.groupid,
						// 会话类型：单聊、群聊和聊天室分别为 `singleChat`、`groupChat` 和 `chatRoom`，默认为单聊。
						chatType: "groupChat",
						// msgConfig: { allowGroupAck: true } // 设置此消息需要已读回执。
						ext: {
							nickname: this.user.nickname,
							head_img: this.user.head_img,
							groupname: this.groupinfo.name,
							groupheadimg: this.groupinfo.avatar,
							is_shield: this.groupinfo.group_member_one.is_shield
						},
					};
					// 创建文本消息。
					let msg = uni.WebIM.message.create(option);
					// 调用 `send` 方法发送该文本消息。
					uni.WebIM.conn.send(msg).then((res) => {
						let aaa = res.message
						this.list.push({
							content: aaa.msg,
							msgType: aaa.type,
							source: aaa.from,
							target: aaa.to,
							time: aaa.time,
							nickname: aaa.ext.nickname,
							head_img: aaa.ext.head_img

						})

						this.content = ''
						console.log("Send message success", res);
					}).catch((e) => {
						console.log("Send message fail", e);
						if (e.type == 506) {
							uni.$u.toast("全体禁言中")
						}
						if (e.type == 507) {
							uni.$u.toast("你已被禁言，请联系管理员")
						}
					});

					this.initScrollBar()
				}
			},
			login() {
				let that = this
				var options = {
					user: that.user.id.toString(),
					accessToken: that.user.hx_im_token,
					appKey: uni.WebIM.config.appkey
				};
				console.log(options, "登陆数据")
				uni.setStorageSync("hx_token", that.user.hx_im_token)
				uni.WebIM.conn.open(options).then(res => {

				})
				// console.log("登录成功")

				// console.log("登录成功")

			},
			getuser() {
				getuserinfo().then(res => {
					console.log(res)
					if (res.code == 1) {
						this.user = res.data
						this.userId = res.data.id
						this.login()
						// console.log("用户信息",this.user)

					}
				})
			},
			right() {
				uni.navigateTo({
					url: "/pagesMy/chat/detail?id=" + this.groupinfo.hx_group_id
				})
			},
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			// 初始化滚动
			initScrollBar() {
				setTimeout(() => {
					this.scrollViewId = ''
					setTimeout(() => {
						this.scrollViewId = 'bottom'
						setTimeout(() => {
							this.scrollViewId = ''
						}, 100)
					}, 100)
				}, 100)
			},
			// 监听输入聚焦
			inputFocus(e) {
				this.showFile = false
				this.showEmoji = false

				// #ifdef APP

				// #endif

				console.log(e.detail.height)
				// #ifdef H5
				this.bottomHeight = "0rpx"
				// #endif


				this.setScrollHeight(e.detail.height)
				uni.onKeyboardHeightChange(res => {
					// this.bottomHeight = (res.height) + "rpx";
					this.setScrollHeight(res.height)
					this.initScrollBar()

				})
				this.initScrollBar()


			},
			// 设置scroll的高度
			setScrollHeight(descHeight = 0) {
				// #ifdef MP-WEIXIN
				this.scrollHeight = `calc(100vh - 110rpx - ${descHeight}px)`
				// #endif
				// #ifdef APP-PLUS
				this.scrollHeight = `calc(100vh - 88upx - ${descHeight}px)`
				// #endif
				// #ifdef H5
				this.scrollHeight = `calc(100vh - 88rpx - ${descHeight}px)`
				// #endif
			},
			initheight() {
				this.bottomHeight = "0rpx"
			},
			// 切换选择
			togglePicker(height = 0, type = '') {
				this.showEmoji = false
				this.showFile = false

				let status = height > 0 ? true : false

				switch (type) {
					case 'emoji':
						this.bottomHeight = "340rpx"
						this.showEmoji = status;
						break
					case 'file':
						this.bottomHeight = "152rpx"
						this.showFile = status;
						break
				}
				this.isEdit = true

				setTimeout(() => {
					// this.setScrollHeight(0)
					this.initScrollBar()
				}, 50)
			},
			// 切换语音与编辑
			toggleEdit(bool) {
				this.isEdit = bool
				this.isFocus = bool
				this.setScrollHeight(0)
			},
			// 开始录音
			startVoice() {
				this.showVoice = true
				recorderManager.start()
			},
			// 结束录音
			endVoice() {
				this.showVoice = false

				recorderManager.stop()
				recorderManager.onStop(res => {
					console.log(res)
					this.sendPrivateAudio(res.tempFilePath)
					console.log(res.tempFilePath)
				})

			},
			// 播放录音
			playVoice(item) {
				this.voicePlayingId = item.url
				innerAudioContext.src = item.url
				innerAudioContext.play()
				// if (this.voicePlayingId) {
				// 	this.voicePlayingId = ''
				// } else {
				// 	this.voicePlayingId = item.id
				// 	innerAudioContext.src = item.url
				// 	innerAudioContext.play()
				// }
			},
			sendPrivateAudio(tempFilePath) {
				let that = this
				if (that.mute == true) {
					uni.$u.toast("全体禁言中")
				} else {

					var str = uni.WebIM.config.appkey.split("#");
					var token = uni.WebIM.conn.context.accessToken;
					console.log("111", token)
					var domain = uni.WebIM.conn.apiUrl;
					uni.uploadFile({
						url: domain + "/" + str[0] + "/" + str[1] + "/chatfiles",
						filePath: tempFilePath,
						name: "file",
						header: {
							Authorization: "Bearer " + token,
							"Content-Type": "multipart/form-data",
						},
						success(res) {
							console.log("详情", res)
							var dataObj = JSON.parse(res.data);
							console.log("data", dataObj)
							var option = {
								type: "audio",
								chatType: "groupChat",
								filename: tempFilePath,
								to: that.groupid,
								ext: {
									nickname: that.user.nickname,
									head_img: that.user.head_img,
									groupname: that.groupinfo.name,
									groupheadimg: that.groupinfo.avatar,
								},
								body: {
									//文件 URL。
									url: dataObj.uri + "/" + dataObj.entities[0].uuid,
									//文件类型。
									type: "audio",
									//文件名。
									filename: tempFilePath,
									// 音频文件时长，单位为秒。
									// length: Math.ceil(duration / 1000),
								},

							};
							console.log("发送对象", option)
							let msg = uni.WebIM.message.create(option);
							// 调用 `send` 方法发送该语音消息。
							uni.WebIM.conn
								.send(msg)
								.then((res) => {

									let aaa = res.message
									console.log("dqwdwwww", aaa)
									that.list.push({
										url: aaa.url,
										msgType: aaa.type,
										source: aaa.from,
										target: aaa.to,
										time: aaa.time,
										nickname: aaa.ext.nickname,
										head_img: aaa.ext.head_img
									})
									console.log("消息列表", that.list)
									that.initScrollBar()
									// 语音消息成功发送。
									console.log("Success", res);
								})
								.catch((e) => {
									if (e.type == 507) {
										uni.$u.toast("你已被禁言")
									}
									// 语音消息发送失败。
									console.log("Fail", e);
								});
						},
						fail(erss) {
							console.log("失败", erss)
						}
					});
				}

			},
			// 长按
			longPress(msg) {
				let data = {
					type: 'single',
					source: this.userId,
					dest: this.groupId,
					msg: {
						id: msg.id,
						userId: msg.userId,
						groupId: msg.groupId,
						type: 'cancel',
						content: msg.content
					}
				}

				uni.sendSocketMessage({
					data: JSON.stringify(data),
					success: res => {
						// 撤销本地消息
						this.list = this.list.map(item => {
							item.type = item.id == msg.id ? 'cancel' : item.type
							return item
						})
					}
				})
			},
			// 获取位置
			getLocation() {
				uni.getLocation({
					success: res => {
						let {
							latitude,
							longitude
						} = res
						uni.chooseLocation({
							latitude,
							longitude,
							success: chooseRes => {
								this.pushMessage(JSON.stringify(chooseRes), 'map')
							}
						})
					}
				})
			},
			// 打开位置
			openLocation(content) {
				let {
					latitude,
					longitude
				} = JSON.parse(content)
				uni.openLocation({
					latitude,
					longitude
				})
			},
			// 上传
			upload(filePath) {
				uni.showLoading({
					title: '加载中'
				});
				uni.uploadFile({
					url: this.$api.upload,
					name: 'file',
					filePath,
					formData: {
						userId: this.userId
					},
					header: this.$util.getHeader(),
					success: res => {
						uni.hideLoading()
						let data = JSON.parse(res.data)
						this.pushMessage(data.data, 'voice')
					},
					fail: err => {
						uni.hideLoading()
					}
				})
			},
			// 发送图片
			uploadImage(sourceType = ['album']) {
				uni.chooseImage({
					sourceType,
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths

						tempFilePaths.forEach(temp => {
							uni.showLoading({
								title: '加载中'
							});
							uni.uploadFile({
								url: this.$api.upload,
								filePath: temp,
								formData: {
									userId: this.userId
								},
								name: 'file',
								header: this.$util.getHeader(),
								success: uploadRes => {
									uni.hideLoading()
									let data = JSON.parse(uploadRes.data)
									this.pushMessage(data.data, 'image')
								},
								fail: err => {
									uni.hideLoading()
								}
							})
						})
					}
				})

			},
			sendImage() {

				var me = this;
				if (me.mute == true) {
					uni.$u.toast("全体禁言中")
				} else {
					uni.chooseImage({
						count: 1,
						sizeType: ["original", "compressed"],
						sourceType: ["album"],
						success(res) {
							console.log("选择图片", res)
							me.sendPrivateImg(res);
						},
					});
				}

			},
			sendimage2(image) {
				let me = this
				var option = {
					type: "img",
					chatType: "groupChat",
					url: image,
					// 消息接收方：单聊为对方用户 ID，群聊和聊天室分别为群组 ID 和聊天室 ID。
					to: me.groupid,
					ext: {
						nickname: me.user.nickname,
						head_img: me.user.head_img,
						groupname: me.groupinfo.name,
						groupheadimg: me.groupinfo.avatar,

					},
				};
				console.log("图片信息", option)
				let msg = uni.WebIM.message.create(option);
				// 调用 `send` 方法发送该图片消息。
				uni.WebIM.conn
					.send(msg)
					.then((res) => {
						// 图片消息成功发送。
						console.log("Success图片", res);
						let aaa = res.message
						me.list.push({
							url: aaa.url,
							msgType: aaa.type,
							source: aaa.from,
							target: aaa.to,
							time: aaa.time,
							nickname: aaa.ext.nickname,
							head_img: aaa.ext.head_img
						})
						me.initScrollBar()
					})
					.catch((e) => {
						uni.$u.toast("发送失败")
						console.log("Fail", e);
						if (e.type == 506) {
							uni.$u.toast("全体禁言中")
						}
						if (e.type == 507) {
							uni.$u.toast("你已被禁言，请联系管理员")
						}
					});
			},
			sendemo(image) {


				var me = this;
				var token = uni.getStorageSync("hx_token");
				uni.getImageInfo({
					src: image,
					success(res) {
						console.log("获取图片信息", res)
						var allowType = {
							jpg: true,
							gif: true,
							png: true,
							bmp: true,
						};
						var str = uni.WebIM.config.appkey.split("#");
						var width = res.width;
						var height = res.height;
						var index = res.path.lastIndexOf(".");
						var filetype = (~index && res.path.slice(index + 1)) || "";
						var domain = uni.WebIM.conn.apiUrl + "/";
						console.log(domain, str, filetype)
						console.log(filetype, index)
						console.log(filetype.toLowerCase() in allowType)
						uni.showLoading({
							title: '加载中'
						});
						uni.uploadFile({
							url: domain + str[0] + "/" + str[1] + "/chatfiles",
							filePath: image,
							name: "file",
							header: {
								// "Content-Type": "multipart/form-data",
								// Authorization: "Bearer " + token,
							},
							success(res) {
								console.log(res, "上传图片")
								uni.hideLoading()
								if (res.statusCode == 200) {
									var data = res.data;
									var dataObj = JSON.parse(data);
									console.log("999", dataObj)
									var option = {
										type: "img",
										chatType: "groupChat",
										width: width,
										height: height,
										url: dataObj.uri + "/" + dataObj.entities[0].uuid,
										// 消息接收方：单聊为对方用户 ID，群聊和聊天室分别为群组 ID 和聊天室 ID。
										to: me.groupid,
										ext: {
											nickname: me.user.nickname,
											head_img: me.user.head_img,
											groupname: me.groupinfo.name,
											groupheadimg: me.groupinfo.avatar,
											is_shield: me.groupinfo.group_member_one.is_shield
										},
									};
									console.log("图片信息", option)
									let msg = uni.WebIM.message.create(option);
									// 调用 `send` 方法发送该图片消息。
									uni.WebIM.conn
										.send(msg)
										.then((res) => {
											// 图片消息成功发送。
											console.log("Success图片", res);
											let aaa = res.message
											me.list.push({
												url: aaa.url,
												msgType: aaa.type,
												source: aaa.from,
												target: aaa.to,
												time: aaa.time,
												nickname: aaa.ext.nickname,
												head_img: aaa.ext.head_img
											})
											me.initScrollBar()
										})
										.catch((e) => {
											uni.$u.toast("发送失败")
											console.log("Fail", e);
											if (e.type == 506) {
												uni.$u.toast("全体禁言中")
											}
											if (e.type == 507) {
												uni.$u.toast("你已被禁言，请联系管理员")
											}
										});
								} else if (res.statusCode === 400) {
									// 图片上传阿里云检验不合法
									var errData = JSON.parse(res.data);
									if (errData.error === "content improper") {
										uni.showToast({
											title: "图片不合法",
										});
										return false;
									}
								} else {
									uni.$u.toast("发送失败")
								}

							},
							fail(erss) {
								uni.$u.toast("发送失败")
							}
						});

					},
				});
			},
			sendPrivateImg(res) {
				var me = this;
				var tempFilePaths = res.tempFilePaths;
				var token = uni.getStorageSync("hx_token");
				uni.getImageInfo({
					src: res.tempFilePaths[0],
					success(res) {
						console.log("获取图片信息", res)
						var allowType = {
							jpg: true,
							gif: true,
							png: true,
							bmp: true,
						};
						var str = uni.WebIM.config.appkey.split("#");
						var width = res.width;
						var height = res.height;
						var index = res.path.lastIndexOf(".");
						var filetype = (~index && res.path.slice(index + 1)) || "";
						var domain = uni.WebIM.conn.apiUrl + "/";
						console.log(domain, str, filetype)
						console.log(filetype, index)
						console.log(filetype.toLowerCase() in allowType)
						uni.showLoading({
							title: '加载中'
						});
						uni.uploadFile({
							url: domain + str[0] + "/" + str[1] + "/chatfiles",
							filePath: tempFilePaths[0],
							name: "file",
							header: {
								// "Content-Type": "multipart/form-data",
								// Authorization: "Bearer " + token,
							},
							success(res) {
								console.log(res, "上传图片")
								uni.hideLoading()
								if (res.statusCode == 200) {
									var data = res.data;
									var dataObj = JSON.parse(data);
									console.log("999", dataObj)
									var option = {
										type: "img",
										chatType: "groupChat",
										width: width,
										height: height,
										url: dataObj.uri + "/" + dataObj.entities[0].uuid,
										// 消息接收方：单聊为对方用户 ID，群聊和聊天室分别为群组 ID 和聊天室 ID。
										to: me.groupid,
										ext: {
											nickname: me.user.nickname,
											head_img: me.user.head_img,
											groupname: me.groupinfo.name,
											groupheadimg: me.groupinfo.avatar,
											is_shield: me.groupinfo.group_member_one.is_shield
										},
									};
									console.log("图片信息", option)
									let msg = uni.WebIM.message.create(option);
									// 调用 `send` 方法发送该图片消息。
									uni.WebIM.conn
										.send(msg)
										.then((res) => {
											// 图片消息成功发送。
											console.log("Success图片", res);
											let aaa = res.message
											me.list.push({
												url: aaa.url,
												msgType: aaa.type,
												source: aaa.from,
												target: aaa.to,
												time: aaa.time,
												nickname: aaa.ext.nickname,
												head_img: aaa.ext.head_img
											})
											me.initScrollBar()
										})
										.catch((e) => {
											uni.$u.toast("上传图片失败")
											console.log("Fail", e);
											if (e.type == 506) {
												uni.$u.toast("全体禁言中")
											}
											if (e.type == 507) {
												uni.$u.toast("你已被禁言，请联系管理员")
											}
										});
								} else if (res.statusCode === 400) {
									// 图片上传阿里云检验不合法
									var errData = JSON.parse(res.data);
									if (errData.error === "content improper") {
										uni.showToast({
											title: "图片不合法",
										});
										return false;
									}
								} else {
									uni.$u.toast("上传图片失败")
								}

							},
							fail(erss) {
								uni.$u.toast("上传图片失败")
							}
						});

					},
				});
			},
			sendPrivateVideo() {
				var me = this;
				if (me.mute == true) {
					uni.$u.toast("全体禁言中")
				} else {
					var token = uni.getStorageSync("hx_token")
					uni.chooseVideo({
						sourceType: ["album", "camera"],
						maxDuration: 30,
						camera: "back",
						success(res) {
							console.log("选择视频", res)
							var tempFilePaths = res.tempFilePath;
							var str = uni.WebIM.config.appkey.split("#");
							var domain = uni.WebIM.conn.apiUrl + '/'
							uni.showLoading({
								title: '加载中'
							});
							uni.uploadFile({
								url: domain + str[0] + "/" + str[1] + "/chatfiles",
								filePath: tempFilePaths,
								name: "file",
								header: {
									// "Content-Type": "multipart/form-data",
									// Authorization: "Bearer " + token
								},
								success(res) {
									uni.hideLoading()
									if (res.statusCode == 200) {
										var data = res.data;
										var dataObj = JSON.parse(data);
										console.log("999", dataObj)
										var option = {
											// 消息类型。
											type: "video",
											// 会话类型：单聊、群聊和聊天室分别为 `singleChat`、`groupChat` 和 `chatRoom`。
											chatType: "groupChat",
											// 文件名。
											filename: "filename",
											// 消息接收方：单聊为对方用户 ID，群聊和聊天室分别为群组 ID 和聊天室 ID。
											to: me.groupid,
											body: {
												//文件 URL。
												url: dataObj.uri + "/" + dataObj.entities[0]
													.uuid,
												//文件类型。
												type: "video",
												//文件名称。
												filename: "filename",
											},
											ext: {
												nickname: me.user.nickname,
												head_img: me.user.head_img,
												groupname: me.groupinfo.name,
												groupheadimg: me.groupinfo.avatar,
												is_shield: me.groupinfo.group_member_one.is_shield
											},
										}
										console.log("消息", option)
										let msg = uni.WebIM.message.create(option);
										// 调用 `send` 方法发送该视频消息。
										uni.WebIM.conn.send(msg).then((res) => {
											let aaa = res.message
											me.list.push({
												url: aaa.url,
												msgType: aaa.type,
												source: aaa.from,
												target: aaa.to,
												time: aaa.time,
												thumb: aaa.thumb,
												nickname: aaa.ext.nickname,
												head_img: aaa.ext.head_img
											})
											console.log(me.list, "列表")
											me.initScrollBar()
											// 视频消息成功发送。
											console.log("Success", res);
										}).catch((e) => {
											if (e.type == 507) {
												uni.$u.toast("你已被禁言")
											}
											console.log("Fail", e);
										});
									} else {
										uni.$u.toast("视频发送失败")
									}
									console.log('上传视频', res)

								},
								fail(e) {
									uni.$u.toast("视频发送失败")
								}
							});
						}
					});
				}

			},
			// 预览图片
			preview(url) {
				uni.previewImage({
					urls: [url]
				})
			},

			// 推送消息
			// pushMessage(content, type='text', cb=()=>{}){
			// 	// 组合消息体：本地数据库需要的数据
			// 	let msgData = {
			// 		userId: this.userId,
			// 		userFace: uni.getStorageSync('userFace'),
			// 		groupId: this.groupId,
			// 		type,
			// 		content
			// 	}

			// 	// 本地保存
			// 	uni.request({
			// 		method: 'POST',
			// 		url: this.$api.addGroupMsg,
			// 		data: msgData,
			// 		header: this.$util.getHeader(),
			// 		success: res=>{
			// 			if(res.data.code){
			// 				return this.$util.toast(res.data.code)
			// 			}
			// 			let msgId = res.data.data

			// 			// 判断是否为非文本
			// 			if(!['text', 'map'].includes(type)){
			// 				msgData.content = this.$api.staticPath + msgData.content
			// 			}

			// 			// 推送消息
			// 			this.$xbcim.sendGroup({
			// 				content: msgData.content,
			// 				msgType: type,
			// 				source: this.userId,
			// 				target: this.groupId,
			// 				extra: {
			// 					id: msgId,
			// 					userFace: uni.getStorageSync('userFace')
			// 				}
			// 			})

			// 			// 加入信息
			// 			this.list.push({
			// 				content: msgData.content,
			// 				type: 'group',
			// 				msgType: type,
			// 				source: this.userId,
			// 				target: this.groupId,
			// 				userFace: uni.getStorageSync('userFace')
			// 			})

			// 			// 初始化滚动条
			// 			this.initScrollBar()
			// 			cb ? cb() : this.togglePicker(0, 'file')
			// 		}
			// 	})
			// },
			// 获取记录
			// getList(){
			// 	uni.request({
			// 		url: this.$api.getGroupMsg,
			// 		data: {
			// 			groupId: this.groupId
			// 		},
			// 		header: this.$util.getHeader(),
			// 		success: res=>{
			// 			this.list = res.data.data.map(item=>{
			// 				if(['voice', 'image'].includes(item.type)){
			// 					item.content = this.$api.staticPath+item.content
			// 				}
			// 				item.userFace = item.face ? this.$api.staticPath + item.face : ''

			// 				// 为了和socket的字段一致，此处做一个转换；
			// 				// 数据表字段可以直接设置为source、target和msgType
			// 				item.source = item.userId
			// 				item.target = item.groupId
			// 				item.msgType = item.type

			// 				return item
			// 			})

			// 			this.scrollViewId = ''
			// 			setTimeout(()=>{
			// 				this.scrollViewId = 'bottom'
			// 				setTimeout(()=>{this.scrollViewId = ''}, 100)
			// 			}, 100)
			// 		}
			// 	})
			// },
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-navbar__content__right__text {
		color: #FFFFFF;
	}

	/deep/.u-navbar__content__title {
		width: 400rpx;
		font-size: 28rpx !important;
	}

	.container {
		position: relative;
		// background-color: #FFF;
		height: 100vh;
		overflow: hidden;
		background-color: #F3F3F3;
	}

	/* #ifdef H5 */
	.container {
		position: relative;
		// height: calc(100vh - 88upx);
		height: 100vh;
		background-color: #F3F3F3;
	}

	/* #endif */

	.status_bar,

	.header,
	.emoji,
	.file {
		background-color: #F3F3F3;

	}

	.status_bar {
		// background-color: green;
	}

	.header {
		// background-color: #A0EA6F;
		border-bottom: 2upx solid #EEE;

		.center {
			font-weight: bold;
		}
	}

	.map {
		width: 60%;
		height: 300upx;
		background-color: #FFF !important;

		&::before {
			border-right: 30upx solid #FFF !important;
		}

		.title {
			height: 80upx;
			font-size: 28upx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.box {
			width: 100%;
			height: 170upx;
			margin-top: 10upx;
		}
	}

	.emoji {
		width: 750rpx;
		height: 360upx;
		padding: 0 0 20upx 20upx;
		position: absolute;
		bottom: 0rpx;
		z-index: 21;
		padding-top: 40rpx;
		background-color: #F3F3F3;

		// background-color: yellow;
		.list {
			width: 100%;
			height: 400upx;
			padding: 20upx 0;
			overflow-y: auto;
			padding-bottom: 160rpx;

			.item {
				float: left;
				display: block;
				height: 60upx;
				line-height: 60upx;
				width: calc(100% / 12);
				margin-right: 20upx;
			}
		}
	}

	.file {
		width: 750rpx;
		padding: 30upx 20upx;
		position: absolute;
		z-index: 20;
		bottom: 0rpx;
		padding-bottom: 20rpx;

		// background-color: #000;
		.list {
			display: flex;
			overflow: hidden;
			padding-left: 10upx;
			justify-content: flex-start;

		}

		.item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 110upx;
			height: 110upx;
			border-radius: 10upx;
			margin-right: 40upx;
			background-color: #FFF;

			.icon {
				width: 50upx;
			}

			.text {
				font-size: 24upx;
				margin-top: 4upx;
			}
		}
	}

	.oper {
		width: 750rpx;
		height: 130upx;
		padding: 0 20upx;
		box-sizing: border-box;
		border-top: 2upx solid #EEE;
		border-bottom: 2upx solid #EEE;
		background-color: #dedede;
		display: flex;
		align-items: center;
		padding-bottom: 20rpx;
		position: absolute;
		bottom: 0rpx;
		z-index: 10;

		.input {
			height: 68upx;
			line-height: 68upx;
			padding: 0 20upx;
			font-size: 28upx;
			border-radius: 10upx;
			background-color: #fff;
			width: calc(100% - 120upx - 20upx - 40upx - 60upx);
		}

		.icon {
			width: 60upx;
			height: 60upx;
			margin-left: 20rpx;
		}

		.btn {
			color: #fff;
			width: 90upx;
			height: 52upx;
			font-size: 24upx;
			line-height: 52upx;
			text-align: center;
			border-radius: 10upx;
			background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
			margin-left: 20rpx;
		}
	}

	.scroll {
		position: absolute;
		bottom: 0rpx;
		width: 750rpx;
		// background-color: red;
		overflow-y: auto;
		transition: all 0.1s ease;
		// height: 1600rpx;
		// height: 1500rpx;
		height: calc(100vh- var(--status-bar-height));
		// height: calc(100vh - 88upx - 200upx - var(--status-bar-height));
		/* #ifdef MP-WEIXIN */
		height: calc(100vh - 88upx - var(--status-bar-height));
		/* #endif */

		.item-space {
			height: 30upx;
		}

		.time {

			color: #666;
			font-size: 24upx;
			text-align: center;
			margin-bottom: 20upx;
		}

		.cancel {
			width: 100%;
			height: 40upx;
			text-align: center;
			margin-bottom: 30upx;

			.text {
				color: #999;
				font-size: 24upx;
			}
		}

		.item {
			display: flex;
			margin: 0 30upx 30upx;
			align-items: flex-start;
			justify-content: flex-start;

			.face {
				margin-top: 40rpx;
				width: 80upx;
				height: 80upx;
				border-radius: 20upx;
			}

			.content {
				color: #000;
				font-size: 32upx;
				min-height: 80upx;
				border-radius: 10upx;
				padding: 20upx 24upx;
				background-color: #fff;
				word-break: break-all;
				word-wrap: break-word;
				// max-width: calc(100% - 100upx - 120upx);
				max-width: 500rpx;
				position: relative;
				text-align: left;

				&::before {
					content: '';
					width: 0;
					height: 0;
					border-right: 30upx solid #FFF;
					border-top: 20upx solid transparent;
					border-bottom: 20upx solid transparent;
					position: absolute;
					top: 24upx;
				}

				.voice-icon {
					width: 32upx;
					height: 40upx;
					margin-right: 180upx;
					margin-bottom: -8upx;
				}
			}

			&.left {
				text-align: left;

				.face {
					margin-right: 30upx;
				}

				.content::before {
					left: -20upx;
				}
			}

			&.right {
				flex-direction: row-reverse;
				text-align: right;

				.face {
					margin-left: 30upx;
				}

				.content {
					background-color: #A0EA6F;

					&::before {
						right: -20upx;
						transform: rotate(180deg);
						border-right: 30upx solid #A0EA6F;
					}

					.voice-icon {
						margin-right: 0;
						margin-left: 180upx;
						transform: rotate(180deg);
					}
				}
			}
		}

		#bottom {
			height: 200rpx;
		}
	}

	.wraps {
		display: flex;
		width: 400rpx;
		align-items: self-end;
		flex-direction: column;

		.content {
			color: #000;
			font-size: 32upx;
			min-height: 80upx;
			border-radius: 10upx;
			padding: 20upx 24upx;
			background-color: #fff;
			word-break: break-all;
			word-wrap: break-word;
			max-width: calc(100% - 100upx - 120upx);
			position: relative;


		}

		>video {
			position: relative;
			z-index: 2;
		}
	}

	.yesss {
		align-items: self-end;
	}

	.nosss {
		align-items: start
	}

	.yesmar {
		margin-top: 40rpx;
	}

	.nomar {
		margin-top: 0rpx !important;
	}

	.nickname {
		width: 300rpx;
		white-space: nowrap;
		/* 防止文本换行 */
		overflow: hidden;
		/* 隐藏溢出的文本 */
		text-overflow: ellipsis;
		/* 当文本溢出时显示省略号 */
		font-weight: 400;
		font-size: 26rpx;
		color: #000;
		opacity: 0.6;
	}

	.titemo {
		display: flex;
		align-items: center;

		>image {
			// margin-left: 30rpx;
			margin-right: 40rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}

	.list2 {
		width: 750rpx;
		height: 400rpx;
		overflow-y: auto;
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 140rpx;

		.itemii {
			width: 100rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			// height: 130rpx;
			>image {
				width: 100rpx;
				height: 100rpx;
			}

			>text {
				width: 100rpx;
				font-size: 26rpx;
				color: #A6A5AF;
				text-align: center;
			}
		}

	}
</style>